.GraphContextMenu {
  border-radius: 3px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
    rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

.GraphContextMenu
  :global(.react-contexify__item):hover
  > :global(.react-contexify__item__content),
.GraphContextMenu
  :global(.react-contexify__item):focus
  > :global(.react-contexify__item__content) {
  background-color: hsla(var(--color-brandHsl), 0.1);
  color: var(--palette-purple-4);
}

.GridSubmenu :global(.react-contexify__submenu) {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 3px;
  gap: 3px;
}

.GridSubmenu
  :global(.react-contexify__submenu)
  :global(.react-contexify__item):hover
  > :global(.react-contexify__item__content):has(.ColorSquare) {
  background-color: transparent;
}

.GridSubmenu
  :global(.react-contexify__submenu)
  :global(.react-contexify__item__content) {
  padding: 0;
}

.SquareButton {
  display: grid;
  place-content: center;
}

.SquareButton,
.ColorSquare,
.ShapeSquare {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 3px;
  cursor: pointer;
  transform: scale(1);
  transition: transform 0.15s ease-in-out;
}

.ShapeSquare {
  background-image: url(/public/images/shape-sprite.svg);
  background-size: 360px;
  background-position-x: calc(-12px - var(--col) * 145px);
  background-position-y: calc(-12px - var(--row) * 126.75px);
  border-radius: 3px;
  overflow: hidden;
}

.GridSubmenu
  :global(.react-contexify__submenu)
  :global(.react-contexify__item):hover
  .ColorSquare {
  box-shadow: inset 0px 0px 0px 2px rgba(0, 0, 0, 0.4);
  transition: none;
  transform: scale(0.9);
}

.BorderItem {
  width: 100%;
  height: 20px;
  margin-bottom: 16px;
  border-width: 0;
  border-bottom-width: 4px;
  border-bottom-color: black;
}

.EdgeItem {
  width: 100%;
  height: 20px;
  margin-bottom: 16px;
  border-width: 0;
  border-bottom-width: 4px;
  border-bottom-color: black;
}
